<template>
  <el-card class="custom-card">
    <!-- 卡片顶部区域 -->
    <div class="flex flex-col">
      <!-- 大标题 -->
      <h1 class="contact-title">
        团队成员
      </h1>

      <div class="custom-double-divider">
        <el-divider class="title-divider" />
      </div>

      <!-- 团队成员列表 -->
      <div class="team-member-container">
        <!-- 袁媛 -->
        <div class="team-member">
          <div class="member-image-container">
            <el-image src="/microbe/member/img1.png" alt="袁媛" class="member-image"/>
          </div>
          <div class="member-info">
            <h2 class="member-name">袁媛</h2>
            <p class="member-title">中国中医科学院首席研究员，中国中医科学院医学实验中心副主任，博士生导师</p>
            <div class="member-details">
              <p>国家杰出青年科学基金获得者。兼任中华中医药学会中药鉴定分会主任委员，中国中西医结合学会分子生药学专业委员会主任委员，世界中医药联合会中药分析专委会副会长，中国中药协会种子种苗专委会副主任委员。</p>
              <p>长期从事中药鉴定与分子生药学研究，在Nature communications、Science Bulletin等杂志上以第一或通讯作者发表论文120余篇，授权专利43项，发布国家标准、团体标准11项。</p>
              <p>先后获中国青年女科学家奖团队奖、北京市科技新星、科技部中青年科技创新领军人才、国家中医药管理局青年岐黄学者、中国科协求是杰出青年成果转化奖等。获国家科技进步二等奖、中国中西医结合学会科技进步一等奖、中华中医药学会科技进步二等奖等8项。</p>
            </div>
            <div class="member-contact">
              <strong>联系方式：</strong>
              <a href="mailto:y_yuan0732@163.com">y_yuan0732@163.com</a>
            </div>
          </div>
        </div>

        <!-- 刘天睿 -->
        <div class="team-member">
          <div class="member-image-container">
            <el-image src="/microbe/member/img2.png" alt="刘天睿" class="member-image"/>
          </div>
          <div class="member-info">
            <h2 class="member-name">刘天睿</h2>
            <p class="member-title">博士，中国中医科学院中医药健康产业研究所大健康特色资源研究中心负责人，副研究员（内聘）</p>
            <div class="member-details">
              <p>主要从事药用植物与微生物互作机制研究，菌物药资源开发与可持续利用研究。</p>
              <p>主持中央本级重大增减支项目"名贵中药资源可持续利用能力建设项目"、云南省天麻与真菌共生生物学重点实验室开放基金课题项目、江西省中医药管理局科技计划项目、中国中医科学院科技创新工程项目等课题8项。</p>
              <p>在Frontiers in Plant Science、Frontiers in Microbiology、Journal of Fungi、iMeta等杂志上发表高质量学术论文31篇；申报专利16项，授权2项；参与发布中华中医药学会雪莲培养物团体标准1项。</p>
              <p>担任中国中西医结合学会分子生药学专业委员会青年委员、中国中西医结合学会中药专业委员会青年委员、江西省农业科技特派员。</p>
            </div>
            <div class="member-contact">
              <strong>联系方式：</strong>
              <a href="mailto:liutianrui2022@163.com">liutianrui2022@163.com</a>
            </div>
          </div>
        </div>

        <!-- 焦红红 -->
        <div class="team-member">
          <div class="member-image-container">
            <el-image src="/microbe/member/img3.png" alt="焦红红" class="member-image"/>
          </div>
          <div class="member-info">
            <h2 class="member-name">焦红红</h2>
            <p class="member-title">博士，陕西中医药大学陕西省中药资源产业化省部共建协同创新中心专职科研人员，讲师</p>
            <div class="member-details">
              <p>主要从事道地药材品质形成机制研究。</p>
              <p>主持中央本级重大增减支项目"名贵中药资源可持续利用能力建设项目"、咸阳市重点研发计划项目、参与主持国家重点研发计划项目子课题等项目3项。</p>
              <p>以第一作或者共同作者在International Journal of Biological Macromolecules、Plant Biotechnology Journal等期刊上发表论文17篇；参编著作2部；授权2项实用新型专利；申报发明专利2项；参与发布元胡-水稻轮作种植团体标准1项。</p>
              <p>担任中国中西医结合学会分子生药学专业委员会青年委员。</p>
            </div>
            <div class="member-contact">
              <strong>联系方式：</strong>
              <a href="mailto:jhh211411@163.com">jhh211411@163.com</a>
            </div>
          </div>
        </div>

        <!-- 韩鹏杰 -->
        <div class="team-member">
          <div class="member-image-container">
            <el-image src="/microbe/member/img4.png" alt="韩鹏杰" class="member-image"/>
          </div>
          <div class="member-info">
            <h2 class="member-name">韩鹏杰</h2>
            <p class="member-title">博士，齐鲁工业大学山东省分析测试中心助理研究员，硕士生导师</p>
            <div class="member-details">
              <p>主要从事药用真菌品质形成调控机制研究。</p>
              <p>主持中央本级重大增减支项目"名贵中药资源可持续利用能力建设项目"、山东省自然科学基金青年项目、参与山东省重点研发项目等纵向项目3项。</p>
              <p>在Frontiers in Plant Science、Frontiers in Microbiology、BMC Genomic Data、Plants等杂志上发表高质量学术论文13篇；参编著作1部；授权1项发明专利；申报发明专利2项。</p>
              <p>担任中国中西医结合学会分子生药学专业委员会青年委员。</p>
            </div>
            <div class="member-contact">
              <strong>联系方式：</strong>
              <a href="mailto:hanpengjie2023@126.com">hanpengjie2023@126.com</a>
            </div>
          </div>
        </div>

        <!-- 华中一 -->
        <div class="team-member">
          <div class="member-image-container">
            <el-image src="/microbe/member/img5.png" alt="华中一" class="member-image"/>
          </div>
          <div class="member-info">
            <h2 class="member-name">华中一</h2>
            <p class="member-title">博士，江苏大学药学院讲师</p>
            <div class="member-details">
              <p>主要从事中医药大数据整合与信息挖掘研究。</p>
              <p>以第一作或者共同作者在Plant Biotechnology Journal、Molecular Ecology Resource等期刊发表SCI论文11篇，授权发明专利2项，软件著作权4项。</p>
            </div>
            <div class="member-contact">
              <strong>联系方式：</strong>
              <a href="mailto:hzy@ujs.edu.cn">hzy@ujs.edu.cn</a>
            </div>
          </div>
        </div>

        <!-- 许源升 -->
        <div class="team-member">
          <div class="member-image-container">
            <el-image src="/microbe/member/img6.png" alt="许源升" class="member-image"/>
          </div>
          <div class="member-info">
            <h2 class="member-name">许源升</h2>
            <p class="member-title">硕士，中国中医科学院中医药健康产业研究所科研助理</p>
            <div class="member-details">
              <p>主要从事中药资源与分子鉴定研究。</p>
              <p>参与国家自然科学基金、江西省重点研发计划、中国中医科学院科技创新工程、江西省中医药管理局科技计划等研究项目4项；参与起草药用标准1项、系列团体标准5项。</p>
              <p>以第一作者发表论文4篇，参与授权专利2项，申请专利4项。</p>
            </div>
            <div class="member-contact">
              <strong>联系方式：</strong>
              <a href="mailto:xuyuansheng2022@163.com">xuyuansheng2022@163.com</a>
            </div>
          </div>
        </div>

        <!-- 李晓爱 -->
        <div class="team-member">
          <div class="member-image-container">
            <el-image src="/microbe/member/img7.png" alt="李晓爱" class="member-image"/>
          </div>
          <div class="member-info">
            <h2 class="member-name">李晓爱</h2>
            <p class="member-title">硕士，中国中医科学院中医药健康产业研究所大健康特色资源研究中心科研助理</p>
            <div class="member-details">
              <p>主要从事分子植物病理学研究。</p>
              <p>参与江西省中医药管理局科技计划等研究项目1项；以共同作者在New Phytologist期刊发表论文1篇，参与授权专利2项。</p>
            </div>
            <div class="member-contact">
              <strong>联系方式：</strong>
              <a href="mailto:18304310648@163.com">18304310648@163.com</a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
</script>

<style scoped>
/* 自定义卡片样式 */
.custom-card {
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  max-width: 900px;
  margin: 0 auto;
}

.custom-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 标题样式 */
.contact-title {
  font-size: 35px;
  font-weight: bold;
  color: #333;
  text-align: start;
  margin-bottom: 2rem;
}

/* 团队成员容器 */
.team-member-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* 团队成员样式 */
.team-member {
  display: flex;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.team-member:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.member-image-container {
  flex: 0 0 150px;
}

.member-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  aspect-ratio: 3/4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.member-title {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1rem;
  font-weight: 500;
  text-align: justify;
  text-align-last: left;
}

.member-details {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: justify;
  text-align-last: left;
}

.member-details p {
  margin-bottom: 0.8rem;
  text-align: justify;
  text-align-last: left;
}

.member-contact {
  color: #555;
  text-align: justify;
  text-align-last: left;
}

.member-contact a {
  color: #13675b;
  text-decoration: none;
}

.member-contact a:hover {
  text-decoration: underline;
}

/* 双分隔线样式 */
.custom-double-divider {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.title-divider {
  position: relative;
  border: none;
  margin: 0;
  height: 1px;
}

.title-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height:4px;
  background: #13675b;
}

.title-divider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  height: 1px;
  background: #e5e7eb;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .custom-card {
    padding: 1.5rem;
  }

  .contact-title {
    font-size: 1.8rem;
  }

  .team-member {
    flex-direction: column;
    gap: 1.5rem;
  }

  .member-image-container {
    flex: 0 0 auto;
    width: 150px;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .custom-card {
    padding: 1rem;
  }

  .contact-title {
    font-size: 1.5rem;
  }

  .member-name {
    font-size: 1.3rem;
  }

  .member-image-container {
    width: 120px;
  }
}
</style>